<template>
	<view class="container">
		<view class="bg">
			<view class="head">
				<image @click="backPage()" class="fanhuiIma" src="@/static/icon1/fanhui.png" mode="aspectFill"></image>
				<text>完成邀请</text>
			</view>
			<view class="head-title">
				<image class="head-title-img" src="../../../static/icon2/g.png" mode="aspectFill"></image>
				<text class="head-title-text">您的订单已经完成！</text>
			</view>
			<!-- <view class="guidance-view">推荐：明天任务提前发布（免诚意金）</view> -->
		</view>
		<view class="staff-infos-title">
			<image src="../../../static/wandanyaoqing.png" mode="aspectFit"></image>
			<!-- <text class="staff-infos-title-title">免诚意金发布</text>
			<view class="staff-infos-title-container">您可以根据雇员的表现，选择合格的雇员继续接单哦!</view> -->
		</view>
		<!-- 选了人叫 邀请发单 不然就是 (已选0人)快速发布 -->
		<view class="item-box1" v-if="isHShow">
			<view v-for="item in staffList" :key="item.userId" class="item-list">
				<view class="staff-infos-items"
					:style="{'background-color':jf_staffList.includes(item.userId) ? '#efefef' : ''}">
					<image mode="aspectFill"
						:class="isSelect.includes(item.userId)&&!jf_staffList.includes(item.userId) ? 'staff-infos-items-image' : 'staff-infos-items-image1'"
						@click="jf_staffList.includes(item.userId)?'':selctFun(item.userId)"></image>
					<view
						:class="[item.userIdentityStatus==0&&'avatar-pic-vip1',item.userIdentityStatus==1&&'avatar-pic-vip2',item.userIdentityStatus==2&&'avatar-pic-vip3']">
						<image class="image" :src="imgPath + item.avatar" mode="aspectFill"
							@click="handleOpenDetail(item.userId)">
						</image>
						<!-- <view v-if="item.vip_flag" class="vip-crown">
							<image src="@/static/icon3/adasdasd.png" mode="aspectFill"></image>
							<text>金牌</text>
						</view> -->
					</view>
					<view class="staff-infos-items-nameList" @click.stop="handleOpenDetail(item.userId)">
						<view>
							<text class="names">{{ item.username }}</text>
							<!-- <image v-show="item.usex==1" class="xb" src="/static/icon1/21.png" mode="aspectFill"></image>
						<image v-show="item.usex==0" class="xb" src="/static/icon1/55.png" mode="aspectFill"></image> -->
							<view v-if="item.usex==0" class="sex-nan">
								<image class="sex-image" src="@/static/icon3/nna1111.png" mode="aspectFill"></image>
								{{!item.age ? '未知' : item.age}}
							</view>
							<view v-if="item.usex==1" class="sex-nv">
								<image class="sex-image" src="@/static/icon3/nv111.png" mode="aspectFill"></image>
								{{!item.age ? '未知' : item.age}}
							</view>
						</view>
						<view class="cxDiv">
							<view class="cx">
								<text>评分</text>
								<text
									:style="{color:jf_staffList.includes(item.userId) ? '#7F7F7F' : ''}">{{ item.employeeRating }}</text>
							</view>
							<text class="fg">|</text>
							<view class="cx">
								<text>好评率</text>
								<text
									:style="{color:jf_staffList.includes(item.userId) ? '#7F7F7F' : ''}">{{ item.haoping }}%</text>
							</view>
						</view>
					</view>
					<view class="staff-infos-items-pingjia"
						v-show="item.is_employer_evaluate==0&&!pingfen.includes(item.userId)">
						<view class="staff-infos-items-pingjia-view" @click="isShowPingjia=item.userId"><text>评价</text>
							<image src="/static/icon1/finishInvite-jt.png" mode="aspectFill"></image>
						</view>
					</view>
					<view class="staff-infos-items-pingjia"
						v-show="pingfen.includes(item.userId)||item.is_employer_evaluate==1">
						<text class="staff-infos-items-pingjia-text"
							v-show="pingfen[pingfen.indexOf(item.userId)+1]==0||item.score==5">“太赞了”</text>
						<text class="staff-infos-items-pingjia-text"
							v-show="pingfen[pingfen.indexOf(item.userId)+1]==1||(item.score>=3&&item.score<5)">“一般般”</text>
						<text class="staff-infos-items-pingjia-text"
							v-show="pingfen[pingfen.indexOf(item.userId)+1]==2||item.score<=2">“很糟糕”</text>
					</view>
				</view>
				<view class="staff-infos-items-pingjia-div" v-if="isShowPingjia==item.userId">
					<!-- <view class="staff-infos-items-pingjia-sj"></view> -->
					<view class="staff-infos-items-pingjia-alert">
						<view class="staff-infos-items-pingjia-alert-item">
							<view class="staff-infos-items-pingjia-alert-items"
								@click="haoping_item=0,select_pingfen(item.userId,0),order_evaluate(item.id,'5','太赞了')">
								<image :class="haoping_item==0 ? 'slected-haoping' : 'haoping'" mode="aspectFill">
								</image>
								<text :class="haoping_item==0 ? 'slected-text' : 'no-select-text'">太赞了</text>
							</view>
							<view class="staff-infos-items-pingjia-alert-items"
								@click="haoping_item=1,select_pingfen(item.userId,1),order_evaluate(item.id,'4','一般般')">
								<image :class="haoping_item==1 ? 'slected-zhongping' : 'zhongping'" mode="aspectFill">
								</image>
								<text :class="haoping_item==1 ? 'slected-text' : 'no-select-text'">一般般</text>
							</view>
							<view class="staff-infos-items-pingjia-alert-items"
								@click="haoping_item=2,select_pingfen(item.userId,2),order_evaluate(item.id,'2','很糟糕')">
								<image :class="haoping_item==2 ? 'slected-chaping' : 'chaping'" mode="aspectFill">
								</image>
								<text :class="haoping_item==2 ? 'slected-text' : 'no-select-text'">很糟糕</text>
							</view>
						</view>
						<!-- <view class="shuolaingju">
							<text @click="isShowShuoliangju=true">说两句</text>
							<image src="/static/icon1/finishInvite-jt.png" mode="aspectFill"></image>
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="noStaffDiv" v-if="!isHShow">
			<image src="../../../static/icon3/wuguyuan.png" mode="aspectFill"></image>
			<text>雇员都在工作中哦~</text>
		</view>
		<view class="mask" @touchmove.stop.prevent="moveHandle" v-show="isShowShuoliangju">
			<view class="mask-alert">
				<text class="mask-alert-title">说两句</text>
				<view class="mask-alert-con">
					<textarea v-model="shuoliangju" style="width: 428rpx;height: 220rpx; margin-top: 20rpx;"
						maxlength="50" placeholder="快来夸夸雇员吧~" placeholder-style="font-size:24rpx"></textarea>
				</view>
				<view class="mask-alert-button-div">
					<view class="mask-alert-button-quxiao" @click="clearShuoliangju()">取消</view>
					<view class="mask-alert-button-queren" @click="isShowShuoliangju=false">确认</view>
				</view>
			</view>
		</view>
		<!--  -->
		<uni-load-more :status="hasFlag ? 'loading' : isNoMore ? 'noMore' : ''"
			v-if="staffList.length!=0&&requestObj.pageNum>1">
		</uni-load-more>
		<!-- <view class="hg-98" style="background-color: #fff;"></view> -->
		<view v-show="isShowPingjia!=-1" class="close_isShowPingjia" @click="isShowPingjia=-1"></view>
		<!-- (已选{{isSelect.length}}人) -->
		<view class="bottomButton">
			<view class="yiyaoqing">
				<view class="yiyaoqing-box">
					<view class="yiyaoqing-box-left">已邀请</view>
					<view class="yiyaoqing-box-mid" v-if="isSelect.length>0">
						<view class="yiyaoqing-box-mid-item" v-for="(item, index) in isSelect" :key="index">
							<image src="../../../static/logo.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="inputvalue">
						<text style="padding-left: 20rpx;width: 80rpx;text-align: right; ">
							{{isSelect.length}}人 </text>
					</view>
					<!-- 		<view v-else class="yiyaoqing-box-mid">
						<image style="width: 60rpx;height: 100%;" src="../../../static/zzzz.png" mode="widthFix">
						</image>
					</view> -->
					<!--  -->
				</view>
			</view>
			<view class="base-info">
				<view class="item">
					<view class="jobTimeStartEnd">
						<view><text class="leftText">任务时间</text><text class="calcOkTime"
								:style="{color:this.workTime >0?'#000':'#000'}">{{ workTime >0 ? '(次日)' : '(次日)'}}</text>
						</view>
					</view>
					<view class="yiyaoqing-box-right">
						<!-- 	<view class="diandian" v-if="isSelect.length>3">
							...
						</view> -->
						<view class="right-time" style="">
							<view style="display: flex;justify-content: center;align-items: center;">
								<text style="font-size: 28rpx; color: #402110;" @click="isShowTimeSelect=true"
									v-if="task.endTime=='' ">请选择任务时间</text>
							</view>
							<text @click="isShowTimeSelect=true" style="color: #402110; display: flex;"
								v-if="task.endTime!=''"
								class="taskInfo-item-text2">{{task.startTime.split(' ')[1].slice(0,5)}}<text
									style="margin: 0 10rpx;">—</text>{{isTaskTomorrowFlag?'次日':''}}{{task.endTime.split(' ')[1].slice(0,5)}}</text>
							<image style="width: 28rpx;height: 28rpx;margin-left: 10rpx;"
								src="../../../static/finishInvite-jt.png" mode="widthFix"></image>
						</view>
					</view>
					<!-- 	<view class="yiyaoqing-box-left">已邀请</view>
					<view class="yiyaoqing-box-mid" v-if="isSelect.length>0">
						<view class="yiyaoqing-box-mid-item" v-for="(item, index) in isSelect" :key="index">
							<image src="../../../static/logo.png" mode="widthFix"></image>
						</view>
					</view> -->
					<!-- <view class="jobTimeStartEnd">
						<view style="display: flex;justify-content: center;align-items: center;">
							<text style="font-size: 26rpx;" @click="isShowTimeSelect=true"
								v-if="task.endTime=='' ">请选择任务时间</text>

						</view>
						<text @click="isShowTimeSelect=true" style="color: #402110;" v-if="task.endTime!=''"
							class="taskInfo-item-text2">{{task.startTime.split(' ')[1].slice(0,5)}}<text
								style="margin: 0 10rpx;">—</text>{{isTaskTomorrowFlag?'次日':''}}{{task.endTime.split(' ')[1].slice(0,5)}}</text>
						<image style="width: 24rpx;height: 100%;margin-left: 10rpx;"
							src="../../../static/finishInvite-jt.png" mode="widthFix"></image>
					</view> -->
				</view>
			</view>
		</view>
		<timeSelect v-if="isShowTimeSelect" @close="isShowTimeSelect=false" :timeFlag="timeFlag" :typeTi="1"
			@getTaskTime="getTaskTime">
		</timeSelect>
		<view class="footer-bth-status" v-if="count">
			<text class="text"> 还有 <text class="monery"> {{count}} <text>元 </text>
				</text> 优惠券待使用 </text>
		</view>
		<view class="footer-bth">
			<!-- <view class="bottomButton-btn1" @click="isShowMoreButton=true"> 编辑 </view> -->
			<view @click="fabuButton()" class="bottomButton-btn"> 发布 </view>
		</view>
		<showModalButton v-show="isShowMoreButton" :modalTextColor="'#787878'" :modalText1="'你需要编辑更多内容吗？'"
			:modalText2="''" :buttonLeftText="'需要'" :buttonRightText="'取消'" :modalTextSize="'32rpx'"
			:modalTextHeight="'49rpx'" :rightButtonColor="'#FE4B28'" @clickLeft="redact(),isShowMoreButton=false"
			@clickRight="isShowMoreButton=false">
		</showModalButton>
	</view>
</template>
<script>
	import Voice from '@/libs/QS-baiduyy.js'
	import {
		he_evaluate_lv,
		get_user_status
	} from '../../../libs/unit.js'
	import timeSelect from '@/components/time-select/time-select.vue'
	import unit from '../../../libs/newUnit.js'
	import {
		isTaskTomorrow
	} from '@/libs/unit.js'
	export default {
		data() {
			return {
				isShowMoreButton: false,
				requestObj: {
					'newdate': 1,
					'pageNum': 0,
					'pageSize': 10,
					'taskId': 0,
				},
				isHShow: true,
				staffList: [], //雇员列表
				jf_staffList: [], //被禁封的id
				imgPath: '', //图片路径
				isShowPingjia: -1, //是否显示评价弹窗
				isSelect: [], //选中的item
				haoping_item: 0, //好评选中的item
				pingfen: [], //0好评 1中评 2差评
				hasFlag: true, //是否加载完成
				handleIsStop: true, // 是否允许切换
				evaluate: {
					"appraise": "",
					"orderId": 0,
					"score": 0,
					"type": 0,
				},
				isShowShuoliangju: false, //是否显示说两句
				shuoliangju: '', //说两句文本
				isOldPage: false, //是否从老雇员邀请页面过来的
				taskId: 0, //
				flagTime: 1, //今天和明天的flag今天0 明天1 。。
				pageType: -1, //功能监测---一键发布1任务中心发布/2历史发布
				reJitter: false,
				isNoMore: false,
				isShowTimeSelect: false,
				task: {
					"endTime": "",
					"startTime": ""
				},
				isTaskTomorrowFlag: false,
				startHour: '',
				startMinute: '',
				endHour: '',
				endMinute: '',
				workTime: 0, //工作时长
				timeFlag: 0, // 0 今天 1明天,
				isTempShow: true,
				numberN: 0,
				count: 0,
			}
		},
		components: {
			timeSelect
		},
		methods: {
			async task_detail() {
				let res = await this.$fetch(this.$api.task_detail, {
					taskId: this.requestObj.taskId
				}, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				let day_0 = new Date(Date.parse(new Date(res.data.startTime.replace(/-/g, '/'))))
				day_0.setDate(day_0.getDate() + 1)
				let day_1 = new Date(Date.parse(new Date(res.data.endTime.replace(/-/g, '/'))))
				day_1.setDate(day_1.getDate() + 1)
				this.task.startTime = this.formatDate(day_0)
				this.task.endTime = this.formatDate(day_1)
				console.log(this.task.startTime)
				console.log(this.task.endTime)
				this.numberN = res.data.number
				// console.log('任务详情', res.data)
			},
			backPage() {
				if (this.BackPress) {
					this.isShowModalButton = !this.isShowModalButton
					this.BackPress = false
				} else {
					this.isShowModalButton = false
					uni.navigateBack({
						delta: 1
					})
				}
			},
			refresh() {
				this.staffList = []
				this.hasFlag = true
				this.requestObj.pageNum = 0
				this.requestObj.pageSize = 10
				this.getStaff()
			},
			jumpYaoDetail() {
				uni.navigateTo({
					url: '/pages/app-employer/finishInvite/yqDetail?taskId=' + this.requestObj.taskId
				})
			},
			//清除评论文字
			clearShuoliangju() {
				this.shuoliangju = ''
				this.isShowShuoliangju = false
			},
			async order_evaluate(id, score, text) {
				// console.log('asdsad')
				this.evaluate.orderId = id
				this.evaluate.anonymous = score == '2' ? 1 : 0
				this.evaluate.score = score
				this.evaluate.appraise = this.shuoliangju == '' ? text : this.shuoliangju
				let res = await this.$fetch(this.$api.order_evaluate, this.evaluate, 'POST', 'JSON')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				uni.showToast({
					title: '评价发布成功~',
					icon: 'none'
				})
				this.shuoliangju == ''
			},
			// 打开雇员详情
			handleOpenDetail(staffId) {
				uni.navigateTo({
					url: '/pages/employer-detail/employee-detail?staffId=' + staffId + '&isOldPage=' + 'true'
				})
			},
			formatDate(date) {
				let d = date,
					month = '' + (d.getMonth() + 1),
					day = '' + d.getDate(),
					year = d.getFullYear(),
					hour = d.getHours(),
					mm = d.getMinutes();
				if (month.toString().length < 2) month = '0' + month;
				if (day.toString().length < 2) day = '0' + day;
				if (hour.toString().length < 2) hour = '0' + hour;
				if (mm.toString().length < 2) mm = '0' + mm;
				return [([year, month, day].join('-')), ([hour, mm, '00'].join(':'))].join(' ');
			},
			getTaskTime(timeList) {
				// console.log(timeList)
				// this.isTips2 = true
				this.task.startTime = timeList[0]
				this.task.endTime = timeList[1]
				this.isShowTimeSelect = false
				this.isTaskTomorrowFlag = isTaskTomorrow(timeList[0], timeList[1])
				this.startHour = this.task.startTime.split(' ')[1].split(':')[0]
				this.startMinute = this.task.startTime.split(' ')[1].split(':')[1]
				this.endHour = this.isTaskTomorrowFlag ? 24 + parseInt(this.task.endTime.split(' ')[1].split(':')[0]) :
					this.task.endTime.split(' ')[1].split(':')[0]
				this.endMinute = this.task.endTime.split(' ')[1].split(':')[1]
				setTimeout(() => {
					this.calWorkTime()
				}, 500)
			},
			// 计算工作时间
			calWorkTime() {
				if ((!this.endHour) || (!this.startHour)) return
				// 工作时长
				let workHour = this.endHour - this.startHour
				let workMinute = this.endMinute - this.startMinute
				if (workMinute < 0) {
					this.workTime = (workHour - 1) + Math.round((60 + workMinute) / 60 * 10) / 10
				} else {
					this.workTime = workHour + Math.round(workMinute / 60 * 10) / 10
				}
			},
			fabuButton() {
				if (this.reJitter) return
				// if(this.isSelect.length){
				// console.log("endTime:"+this.task.endTime)	
				// console.log("startTime:"+this.task.startTime)	
				// return	
				this.reJitter = true
				setTimeout(() => {
					this.reJitter = false
				}, 2000)
				if (this.isSelect.length == 0) {
					uni.showToast({
						title: '请选择邀请人员',
						icon: 'none'
					})
					return
				}
				let editArr = JSON.stringify(this.isSelect)
				uni.redirectTo({
					url: '/pages/app-employer/fabu-pay/fabu-pay3?tempArr=' + editArr + '&taskId=' + this.taskId +
						"&startTime=" + this.task.startTime + "&endTime=" + this.task.endTime + "&number=" + this
						.isSelect.length
				})
				return
				let storageTaskId = uni.getStorageSync('release_task_invitation') ? uni.getStorageSync(
					'release_task_invitation') : {}
				if (!Object.keys(storageTaskId).includes(this.taskId)) {
					unit.release_task_invitation(this.taskId, this.task.startTime, this.task.endTime, this.isSelect.length)
						.then(v => {
							if (v) {
								if (this.isSelect.length) {
									unit.invitation_order(this.isSelect, v.id, this.taskId)
									uni.showToast({
										title: '发布并邀请成功',
										icon: 'none'
									})
									if (uni.getStorageSync('checked1')) {
										Voice('完单邀请已通过，无需支付任何费用')
									}
								} else {
									uni.showToast({
										title: '发布成功',
										icon: 'none'
									})
								}
								setTimeout(() => {
									uni.reLaunch({
										url: '/pages/my-job/boss-my-job-new'
									})
								}, 2000)
							}
							setTimeout(() => {
								this.reJitter = false
							}, 2000)
						})
				} else {
					unit.invitation_order(this.userid, storageTaskId[this.taskId], this.taskId)
					uni.showToast({
						title: '邀请成功',
						icon: 'none'
					})
				}
				// }else{
				// 	uni.showToast({
				// 		title:'请邀请雇员',
				// 		icon:'none'
				// 	})
				// }
				// uni.navigateTo({
				// 	url: '/pages/quickSendJob/quickSendJob?taskId=' + this.taskId + '&timeFlag=' + this.flagTime +
				// 		'&people=' + this.isSelect.length + '&page=' + 3 + '&wdfb=1'
				// })
				// if (this.isSelect.length != 0) {
				// 	setTimeout(() => {
				// 		let pages = getCurrentPages()
				// 		//console.log(pages[pages.length - 1])
				// 		pages[pages.length - 1].$vm.getStaff(this.isSelect)
				// 	}, 1000)
				// }
			},
			async getStaff() {
				let haoping = uni.getStorageSync('heEvaluateLv') ? uni.getStorageSync('heEvaluateLv') : []
				if (!this.hasFlag) return // 说明已经没有更多啦

				++this.requestObj.pageNum
				if (!this.handleIsStop) {
					uni.stopPullDownRefresh()
					this.hasFlag = false
					uni.showToast({
						title: '你点击得太快啦~',
						icon: 'none'
					}) // 说明上一条请求结果未返回
					return
				}
				this.handleIsStop = false
				let res = await this.$fetch(this.$api.my_order_employer_status, this.requestObj, 'POST')
				if (!res.total) {
					uni.stopPullDownRefresh()
					this.hasFlag = false
					return
				}
				this.taskId = res.rows[0].task_id
				let _res = []
				let yaoqingList = uni.getStorageSync('invitation_order')['id' + res.rows[0].task_id]
				await res.rows.forEach((e) => {
					// this.he_task(e.userId).then((v) => {
					// 	this.$set(e, 'isShow', v)
					// })
					if (yaoqingList && yaoqingList.includes(e.userId)) return
					if (e.status != 0) {
						_res.push(e)
						if (haoping.indexOf(e.userId) != -1) {
							e.haoping = haoping[haoping.indexOf(e.userId) + 1]
							//this.$set(e, 'haoping', haoping[haoping.indexOf(e.userId)+1])
						} else {
							he_evaluate_lv(e.userId).then((v) => {
								this.$set(e, 'haoping', v)
							})
						}
						this.selctFun(e.userId)
					}
				})
				uni.stopPullDownRefresh()
				this.handleIsStop = true
				this.staffList = [...this.staffList, ..._res]
				if (this.staffList.length > 0) {
					this.isHShow = true
				} else {
					this.isHShow = false
				}
				// console.log(this.staffList)
				this.hasFlag = this.requestObj.pageSize * this.requestObj.pageNum < res.total
			},
			//多选按钮点击事件
			selctFun(id) {
				let index = this.isSelect.indexOf(id)
				if (index == -1) {
					// if (this.isSelect.length >= this.number) {
					// 	uni.showToast({
					// 		title: '邀请成员过多',
					// 		icon: 'none'
					// 	})
					// 	return
					// }
					// if (this.userIds.length >= this.number) {
					// 	uni.showToast({
					// 		title: '邀请雇员已经满了~',
					// 		icon: 'none'
					// 	})
					// 	return
					// }
					// this.$set(this.isSelect, this.isSelect.length, id)
					get_user_status(id).then((v) => {
						if (v.code == 500) {
							uni.showToast({
								title: v.msg,
								icon: 'none'
							})
							this.jf_staffList.push(id)
						} else {
							this.$set(this.isSelect, this.isSelect.length, id)
						}
						//console.log(v,this.jf_staffList)
					})
				} else {
					this.isSelect.splice(index, 1)
				}
				// console.log(this.isSelect)
				// console.log(index)
				// console.log('点击')
			},
			select_pingfen(userid, index) {
				this.isShowPingjia = -1
				this.pingfen.push(userid, index)
				this.haoping_item = 0
				console.log(this.pingfen)
			},
			redact() {
				uni.navigateTo({
					url: '/pages/app-employer/send-job/send-job?taskId=' + this.taskId + '&type=new' +
						'&minNumber=' + this.numberN + '&wdfb=1' + '&source=' + this.pageType
				})
			},
			//判断是不是新雇主
			async isAmount() {
				let res = await this.$fetch(this.$api.query_newEmployer_amount, {}, 'GET')
				if (res.code !== 0) return
				this.count = res.data
			}
		},
		onLoad(v) {
			this.requestObj.taskId = v.taskId
			this.imgPath = uni.getStorageSync('imgPath')
			this.task_detail()
			if (uni.getStorageSync('token')) {
				this.isAmount()
			}
		},
		onShow() {
			this.refresh()
		},
		onReachBottom() {
			this.isNoMore = true
			this.getStaff()
		},
		onPullDownRefresh() {
			//监听用户下拉动作，一般用于下拉刷新
			this.refresh()
		},
	}
</script>
<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style lang="less" scoped>
	.container {
		background-color: #F2F2F2 !important;
		width: 750rpx;
		min-height: 100vh;
		overflow-x: hidden;
	}

	.bg {
		display: flex;
		width: 862rpx;
		height: calc(441rpx + var(--status-bar-height));
		background-color: #FCC928;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 0rpx 0rpx 110rpx 110rpx;
		margin-left: -56rpx;
	}

	.head {
		width: 650rpx;
		height: 88rpx;
		margin-top: var(--status-bar-height);
		display: flex;
		align-items: center;
		z-index: 10;

		&>text {
			width: 588rpx;
			height: 80rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #000000;
			line-height: 36rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.fanhuiIma {
			width: 23rpx;
			height: 40rpx;
		}
	}

	.head-title {
		margin-top: 63rpx;
		height: 48rpx;
		display: flex;
	}

	.head-title-img {
		width: 48rpx;
		height: 48rpx;
		margin-right: 16rpx;
	}

	.head-title-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #402110;
		line-height: 45rpx;
	}

	.bottomButton {
		width: 694rpx;
		margin: 0 auto 160rpx;
		// background: #F9F9FC;
		// background: none;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		padding-bottom: 168rpx;

		.yiyaoqing {
			width: 694rpx;
			margin: 0 auto;
			// border: 1px solid;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #fff;

			.yiyaoqing-box {
				width: 84%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				// border: 1px solid red;
				.yiyaoqing-box-left {
					// padding-right: 40rpx;
					width: 120rpx;
					text-align: left;
				}

				.yiyaoqing-box-mid {
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;

					// border: 1px solid red;
					.yiyaoqing-box-mid-item {
						// width: 100%;
						padding: 0 10rpx;

						image {
							width: 60rpx;
							height: 100%;
							border-radius: 50%;
						}
					}
				}

				.yiyaoqing-box-right {
					font-size: 28rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #666666;

					.diandian {
						width: 55rpx;
						height: 55rpx;
						display: flex;
						justify-content: center;
						align-items: flex-start;
						border-radius: 50%;
						background: #f5f5f5;
						color: #666;
						letter-spacing: 2rpx;
					}

					image {
						padding-left: 2rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						width: 20rpx;
						height: 100%;
					}
				}
			}
		}

		.base-info {
			width: 694rpx;
			margin: 0 auto;
			// border: 1px solid;
			background: #fff !important;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 0 0 12rpx 12rpx !important;

			.item {
				width: 84%;
				// border: 1px solid;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 100rpx;
				position: relative;

				.leftText {
					font-size: 28rpx;
					font-weight: 500;
					color: #402110;
					line-height: 45rpx;
					// margin-left: 30rpx;
				}

				.calcOkTime {
					font-size: 28rpx;
					color: #FC2828;
					line-height: 45rpx;
					padding-left: 10rpx;
				}

				.jobTimeStartEnd {
					font-size: 28rpx;
					font-weight: 500;
					color: #ABABAB;
					line-height: 45rpx;
					display: flex;
					align-items: center;
					// .m-right-30;
				}
			}
		}
	}

	.footer-bth-status {
		width: 420rpx;
		height: 82.55rpx;
		background: url('../../../static/tip.png') center center/cover no-repeat;
		position: fixed;
		bottom: 118rpx;
		z-index: 99;
		right: 26rpx;

		.text {
			display: block;
			text-align: right;
			margin: 3rpx 30rpx 22rpx 84rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #FFFFFF;
			height: 56rpx;

			.monery {
				font-size: 40rpx;
				font-weight: 600;
				margin: auto 4rpx;
				color: #FFE861;

				text {
					font-size: 28rpx !important;
					color: #FFE861;
				}
			}
		}
	}

	.footer-bth {
		width: 100%;
		position: fixed;
		background: #F1F1F5;
		bottom: 0;
		right: 0;
		display: flex;
		padding-bottom: ;
		justify-content: center;
		padding: 20rpx 0;

		.bottomButton-btn {
			width: 600rpx;
			height: 88rpx;
			background: #FCC928;
			box-shadow: 2rpx 12rpx 24rpx 2rpx rgba(252, 201, 40, 0.4);
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			opacity: 1;
			text-align: center;
			line-height: 88rpx;
			color: #262626;
			font-weight: bold;
			font-size: 36rpx;
		}

		.bottomButton-btn1 {
			width: 224rpx;
			height: 88rpx;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			opacity: 1;
			border: 2rpx solid #7F7F7F;
			text-align: center;
			line-height: 88rpx;
			color: #515151;
			margin-left: 28rpx;
			font-weight: 400;
			font-size: 32rpx;
		}
	}

	.staff-infos-title {
		// height: 176rpx;
		width: 694rpx;
		margin: 0 auto;
		background-color: #FFFFFF;
		border-radius: 12rpx 12rpx 0 0;
		margin-top: -110rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		// border: 1px solid;
		image {
			margin-top: -40rpx;
			width: 100%;
			height: 500rpx;
		}
	}

	.staff-infos-title-title {
		font-size: 40rpx;
		font-weight: bold;
		color: #17C295;
		line-height: 45rpx;
		margin-top: 48rpx;
	}

	.staff-infos-title-container {
		width: 690rpx;
		height: 58rpx;
		background-color: rgba(23, 194, 149, 0.1);
		border-radius: 12rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #17C295;
		margin-top: 32rpx;
	}

	.item-box1 {
		width: 694rpx;
		margin: 0 auto;
		background: #fff;
		// min-height: calc(100vh - 780rpx);
		padding-bottom: 80rpx;
	}

	.item-list {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		margin-bottom: 2rpx;
		// border: 1px solid;
	}

	.staff-infos-items {
		width: 100%;
		// height: 140rpx;
		padding-top: 40rpx;
		padding-bottom: 40rpx;
		border-bottom: 1px solid #f5f5f5;
		// border: 1px solid;
		// background-color: #FFFFFF;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.staff-infos-items-image {
		width: 45rpx;
		height: 45rpx;
		margin-left: 30rpx;
		content: url('../../../static/icon1/finishInvite-gou.png');
	}

	.staff-infos-items-image1 {
		width: 45rpx;
		height: 45rpx;
		margin-left: 30rpx;
		content: url('../../../static/icon1/finishInvite-gou1.png');
	}

	.staff-infos-items-head {
		width: 108rpx;
		height: 108rpx;
		border-radius: 50%;
		background-color: #000000;
	}

	.staff-infos-items-nameList {
		margin-left: 30rpx;
		width: 108rpx;
		height: 108rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		&>view {
			display: flex;
			flex-direction: row;
			align-items: center;
		}
	}

	.names {
		font-size: 34rpx;
		font-weight: 500;
		color: #3E220A;
		line-height: 45rpx;
	}

	.cx {
		font-size: 24rpx;
		font-weight: 400;
		color: #7F7F7F;
		line-height: 49rpx;

		&>text:nth-last-child(1) {
			color: #FE4B28;
		}
	}

	.fg {
		font-size: 24rpx;
		color: #7F7F7F;
		line-height: 49rpx;
		margin: 0 20rpx;
	}

	.staff-infos-items-pingjia {
		margin-right: 32rpx;
	}

	.xb {
		width: 26rpx;
		height: 26rpx;
	}

	.cxDiv {
		display: flex;
		flex-direction: row;
	}

	.staff-infos-items-pingjia-view {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		&>text {
			font-size: 24rpx;
			font-weight: 400;
			color: #3E220A;
			line-height: 45rpx;
		}

		&>image {
			width: 24rpx;
			height: 24rpx;
		}
	}

	.staff-infos-items-pingjia-div {
		width: 477rpx;
		height: 256rpx;
		position: absolute;
		right: 0;
		margin-top: -50rpx;
		margin-right: 30rpx;
		z-index: 1;
	}

	.staff-infos-items-pingjia-sj {
		width: 32rpx;
		height: 32rpx;
		// border-right: 16rpx solid transparent ;
		// border-left: 16rpx solid transparent ;
		// border-bottom: 16rpx solid #FFFFFF;
		transform: rotate(135deg);
		border-color: #fff #fff transparent transparent;
		box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.1);
		margin-left: 421rpx;
	}

	.staff-infos-items-pingjia-alert::before {
		position: absolute;
		display: inline-block;
		top: -2rpx;
		left: 412rpx;
		width: 0;
		height: 0px;
		content: '';
		border-style: solid;
		border-width: 20rpx;
		border-color: #fff #fff transparent transparent;
		background-color: #fff;
		transform: rotate(135deg);
		box-shadow: -2rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
	}

	.staff-infos-items-pingjia-alert {
		width: 477rpx;
		height: 240rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.1);
		border-radius: 12rpx;
		margin-top: 16rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.staff-infos-items-pingjia-alert-item {
		width: 345rpx;
		height: 153rpx;
		position: relative;
		top: 32rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.staff-infos-items-pingjia-alert-items {
		width: 100rpx;
		height: 153rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.haoping {
		content: url('../../../static/icon1/1-2.png');
		width: 68rpx;
		height: 68rpx;
	}

	.slected-haoping {
		content: url('../../../static/icon1/1-1.png');
		width: 68rpx;
		height: 68rpx;
	}

	.zhongping {
		content: url('../../../static/icon1/2-2.png');
		width: 68rpx;
		height: 68rpx;
	}

	.slected-zhongping {
		content: url('../../../static/icon1/2-1.png');
		width: 68rpx;
		height: 68rpx;
	}

	.chaping {
		content: url('../../../static/icon1/3-2.png');
		width: 68rpx;
		height: 68rpx;
	}

	.slected-chaping {
		content: url('../../../static/icon1/3-1.png');
		width: 68rpx;
		height: 68rpx;
	}

	.slected-text {
		font-size: 28rpx;
		color: #402110;
	}

	.no-select-text {
		font-size: 28rpx;
		color: #7F7F7F;
	}

	.shuolaingju {
		margin-top: 42rpx;
		height: 22rpx;
		width: 120rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #402110;
		line-height: 36rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		&>image {
			width: 24rpx;
			height: 24rpx;
		}
	}

	.staff-infos-items-pingjia-text {
		font-size: 24rpx;
		font-weight: 400;
		color: #7F7F7F;
		line-height: 45rpx;
	}

	.mask {
		z-index: 501;
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		background: rgba(0, 0, 0, 0.40);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.mask-alert {
		width: 550rpx;
		height: 481rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.mask-alert-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #000000;
		line-height: 45rpx;
		margin: 40rpx 0;
	}

	.mask-alert-con {
		width: 470rpx;
		height: 232rpx;
		background: #F2F2F2;
		border-radius: 12rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #000000;
		line-height: 41rpx;
		display: flex;
		justify-content: center;
	}

	.mask-alert-button-div {
		width: 470rpx;
		height: 80rpx;
		margin-top: 19rpx;
		display: flex;
		justify-content: space-between;
	}

	.mask-alert-button-quxiao {
		width: 225rpx;
		height: 80rpx;
		border: 1rpx solid #B9B9B9;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: 500;
		color: #7F7F7F;
		line-height: 45rpx;
	}

	.mask-alert-button-queren {
		width: 225rpx;
		height: 80rpx;
		background: #FCC928;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: 500;
		color: #402110;
		line-height: 45rpx;
	}

	.noStaffDiv {
		width: 694rpx;
		margin: 0 auto;
		background: #fff;
		// border: 1px solid;
		// height: calc(100vh - 800rpx);
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 70rpx;

		// position: fixed;
		// left: 50%;
		// top: 65%;
		// transform: translate(-50%, -50%);
		&>image {
			width: 240rpx;
			height: 240rpx;
		}

		&>text {
			font-size: 30rpx;
			font-weight: 400;
			color: #3E220A;
			line-height: 45rpx;
			margin-top: 40rpx;
		}
	}

	.close_isShowPingjia {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
	}

	.cxDiv {
		display: flex;
		flex-direction: row;
	}

	.sex-nan {
		width: 73rpx;
		height: 32rpx;
		background: #1862F9;
		border-radius: 4rpx;
		margin-left: 8rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 20rpx;
	}

	.sex-nv {
		width: 73rpx;
		height: 32rpx;
		background: #FD5D51;
		border-radius: 4rpx;
		margin-left: 8rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 20rpx;
	}

	.sex-image {
		width: 17rpx;
		height: 17rpx;
	}

	.guidance-view {
		width: 690rpx;
		height: 58rpx;
		background-color: rgba(255, 255, 255, .2);
		border-radius: 29rpx;
		margin-top: 32rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #402110;
		text-align: center;
		line-height: 58rpx;
	}

	.staff-infos-items-vip-crown {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 108rpx;
		height: 108rpx;
		margin-left: 32rpx;
	}

	.vip-crown {
		// width: 148rpx;
		padding: 0 10rpx;
		height: 32rpx;
		background: linear-gradient(0deg, #111832, #343B54);
		border-radius: 16rpx;
		position: absolute;
		top: 78rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		&>image {
			width: 28rpx;
			height: 28rpx;
			margin-right: 4rpx;
		}

		&>text {
			font-size: 20rpx;
			font-weight: 500;
			color: #FCC928;
			line-height: 32rpx;
		}
	}

	.avatar-pic-vip {
		width: 105rpx;
		height: 105rpx;
		border-radius: 50%;
		border: 3rpx solid #FCC928;
	}

	.vip-avatar {
		width: 130rpx;
		height: 130rpx;
		background-image: url(../../../static/icon3/7868789.png);
		background-size: cover;
	}

	.inputvalue {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		line-height: 32rpx;
		font-weight: 600;
		text-align: center;

		input {
			padding-left: 0 !important;
		}
	}

	.right-time {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		font-size: 28rpx;
		color: #402110 !important;
		font-weight: bold;
	}

	.yiyaoqing {
		height: auto !important;
	}

	.avatar-pic-vip1 {
		width: 111rpx !important;
		height: 111rpx !important;
		border-radius: 50%;
		background: url('../../../static/icon3/1.png') center center/cover no-repeat;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;

		.image {
			width: 95rpx !important;
			height: 95rpx !important;
			border-radius: 50% !important;
		}
	}

	.avatar-pic-vip2 {
		width: 111rpx !important;
		height: 111rpx !important;
		border-radius: 50%;
		background: url('../../../static/icon3/2.png') center center/cover no-repeat;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;

		.image {
			width: 95rpx !important;
			height: 95rpx !important;
			border-radius: 50% !important;
		}
	}

	.avatar-pic-vip3 {
		width: 111rpx !important;
		height: 111rpx !important;
		border-radius: 50%;
		background: url('../../../static/icon3/3.png') center center/cover no-repeat;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;

		.image {
			width: 85rpx !important;
			height: 85rpx !important;
			border-radius: 50% !important;
			margin-top: 15rpx;
		}
	}
</style>